.fl{
    /*左浮动*/
    float: left;
}

.fr{
    /*右浮动*/
    float: right;
}

/*清除浮动的类*/
.clearFix{
    zoom: 1;
}

.clearFix::after{
    content: '';
    display: block;
    clear: both;
}

.container{
    width: 100%;
    border: 2px solid black;
}


.container>.item{
    /*
    width:border + padding + content
    */
    box-sizing: border-box;
    float: left;
    /*宽度占父级的1/3*/
    width: calc(100% / 3);
    height: 100px;
    /*边框*/
    border: 5px solid red;
}

/*媒体查询*/
/*
screen:包含手机 电脑 pad
浏览器宽度<=640时，这里面的样式会起作用

only:在...条件下
not:不在...条件下

*/


/*
screen：媒体类型
*/
@media only screen and (max-width: 640px) {
    .container>.item{
        width: 50%;
    }
}

/*
阈值
min-width:最小宽度
max-width:最大宽度
min-height:最小高度
max-height:最大高度
*/

@media only screen and (min-width:640px) and (max-width: 960px){
    .container>.item{
        border-color: pink;
    }
}